<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="detailPageTop">
          <el-button @click="cancel">返回</el-button>
          <span>产品名称:{{form.productName}}</span>
          <span>产品唯一标识:{{form.productMarking}}</span>
        </div>
      </el-col>
      <el-col :span="24">
        <el-tabs v-model="activeName" :tab-position="tabPosition" type="card" @tab-click="handleClick">
          <!--配置信息-->
          <el-tab-pane label="配置信息" name="configuration">
            <Configuration ref="configuration" :id=this.queryParams.id></Configuration>
          </el-tab-pane>
          <!--物模型-->
          <el-tab-pane label="物模型" name="wmx">
            <el-tabs v-model="wmxActiveName" type="border-card">
              <!--属性-->
              <el-tab-pane label="属性定义" name="properties">
                <Properties ref="properties" :id=this.queryParams.id></Properties>
              </el-tab-pane>
              <el-tab-pane label="事件定义" name="third">
                <!--事件-->
                <Events ref="properties" :id=this.queryParams.id></Events>
              </el-tab-pane>
              <el-tab-pane label="服务定义" name="fourth">
                <!--服务-->
                <Services ref="properties" :id=this.queryParams.id></Services>
              </el-tab-pane>
              <el-tab-pane label="参数定义" name="five">
                <!--参数-->
                <OutputData ref="properties" :id=this.queryParams.id></OutputData>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {  getProduct } from "@/api/dev/product";
  import Configuration from "@/views/dev/product/tabs/configuration";
  import Properties from "@/views/dev/product/tabs/properties";
  import Events from "@/views/dev/product/tabs/events";
  import Services from "@/views/dev/product/tabs/services";
  import OutputData from "@/views/dev/product/tabs/outputData";

export default {
  components: { Configuration,Properties,Events,Services,OutputData},
  name: "productDetailPage",
  dicts: ['sys_yes_no'],
  data() {
    return {
      //标签展示第几个
      activeName: 'configuration',
      wmxActiveName: 'properties',
      tabPosition: 'top',
      // 查询参数
      queryParams: {
        id: null,
      },
      // 表单参数
      form: {}
    };
  },
  created() {
    //从上级页面获取的规则ID
    const id = this.$route.query.id;
    //this.id = id;
    this.queryParams.id = id;
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    /**  */
    /** 查询产品信息 */
    getInfo() {
      getProduct(this.queryParams.id).then(res => {
        this.form=res.data
      });
    },
    // 返回
    cancel(){
      this.form={}
      this.$router.push({ path: '/dv/product', query: { } })
    },
  }
};
</script>
<style lang="scss"  scoped>
  .detailPageTop{
    padding-bottom: 20px;
    span{
      margin-left: 10px;
    }
  }
</style>
